import React, { Component } from 'react'
import { Col, Icon, Pagination, Popover, Row, Skeleton } from 'antd'
import '../../../less/index.less'
import { Link, withRouter } from 'react-router-dom'
import { TwsProgressCard } from 'tws-antd'
import { connect } from 'react-redux'
import * as programActions from '../../../actions/program'
import { FormattedMessage } from 'react-intl'
import { getLangFromLocalStorage } from '../../../constant/lang-util'
import HorizontalMenu from '../../common/menu/horizontal-menu'

class ProgramList extends Component {

  state = {
    page : 1,
    pageSize : 8,
    loading: true
  }
  componentDidMount () {
    const { page, pageSize} = this.state
    this.props.getProgramList(page,pageSize, () => {
      this.setState({ loading: false })
    })
  }

  goProgram (programId) {
    return '/program/' + programId
  }

  totalStudent (totalStudents, followStudents) {
    return totalStudents === 0 ? 0 : Number.parseFloat(parseFloat((followStudents / totalStudents) * 100).toFixed(2))
  }

  onChangePage = (page) => {
    this.setState({page})
    this.props.getProgramList(page,this.state.pageSize)
  }

  getDefaultSkeleton () {

    return [1,2,3,4].map((item) => <Col className='gutter-row row-margin' span={6} key={item}>
      <Skeleton paragraph={{ rows: 5,width:[250,250,250,250,120]}} title={false}><p/></Skeleton>
    </Col>)
  }

  render () {
    const {content, totalElements} = this.props.programList
    const {page, pageSize, loading} = this.state

    return (
      <div>
        <Row>
          <Col md={{span: 21}} sm={{span: 19}} xs={{span: 19}} lg={{span: 21}}><HorizontalMenu/></Col>
          <Col md={{span: 3}}  sm={{span: 5}} xs={{span: 5}} lg={{span: 3}} className='mini-program'>
            <Popover
              placement="left"
              content={<img src='https://s3.cn-north-1.amazonaws.com.cn/tws-upload/images/1559283619723-e6e4fb32-c3a4-4d3c-b79c-4a32b1155ebe.jpg' width='200px' height='200px' alt='小程序图片'/>} trigger="hover">
              <span style={{ fontSize: '16px', color: '#08c' }}>
                <Icon type="qrcode"/> <FormattedMessage id='小程序' />
              </span>
            </Popover>
          </Col>
        </Row>
        {loading ? <Row gutter={16} className='margin-t-4 pointer'>
            {this.getDefaultSkeleton()}
          </Row>
        :<Row gutter={16} className='margin-t-4 pointer'>
          {content.map((programInfo, index) => {
            const totalStudents = programInfo.totalStudentsCount
            const followStudents = programInfo.followStudentsCount
            const program = programInfo.program
            const percent = this.totalStudent(totalStudents, followStudents)
            const lang = getLangFromLocalStorage()
            const title = program[`title_${lang}`] || program.title
            const programUrl = this.goProgram(program.id)

            return (
              <Col className='gutter-row row-margin' span={6} key={index}>
                <Link to={programUrl}>
                  <TwsProgressCard
                    title={title}
                    percent={percent}
                >
                    <p><FormattedMessage id='本期学员总人数' />:{totalStudents}<FormattedMessage id='人' /></p>
                    <p><FormattedMessage id='我的学员' />：{followStudents}<FormattedMessage id='人' /></p>
                  </TwsProgressCard>
                </Link>
              </Col>)
          })}
        </Row>
        }
        {totalElements > 0 ?
          <Pagination
            defaultCurrent={page}
            total={totalElements}
            pageSize={pageSize}
            current={ page}
            onChange={this.onChangePage}/>
            : ''
        }
      </div>
    )
  }
}

const mapStateToProps = state => ({
  programList: state.tutoredProgramList,
  user: state.user
})
const mapDispatchToProps = dispatch => ({
  getProgramList: (page, pageSize,callback) => dispatch(programActions.getTutoredPrograms(page, pageSize, callback)),
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ProgramList))
